<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --primary-color: #0066cc;
            --secondary-color: #00ccff;
            --dark-bg: #0a1929;
            --card-bg: #0f2942;
            --text-color: #e0f0ff;
            --accent-color: #00ffcc;
            --danger-color: #ff3366;
            --warning-color: #ffcc00;
            --success-color: #33cc33;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--dark-bg);
            padding: 20px;
            overflow-x: hidden;
        }

        .dashboard {
            display: grid;
            grid-template-columns: 250px 1fr;
            grid-gap: 20px;
            height: 100vh;
        }

        .sidebar {
            display: flex;
            flex-direction: column;
            background-color: var(--card-bg);
            border-radius: 10px;
            padding: 20px;
        }

        .main-content {
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        .card {
            background-color: var(--card-bg);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(0, 204, 255, 0.2);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            font-weight: bold;
            color: var(--accent-color);
        }

        .card-content {
            font-size: 14px;
        }

        .btn {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            margin-top: 5px;
        }

        .btn:hover {
            box-shadow: 0 0 15px rgba(0, 204, 255, 0.5);
            transform: translateY(-2px);
        }

        .btn-success {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
        }

        .btn-danger {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th, .table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid rgba(0, 204, 255, 0.3);
        }

        .table th {
            color: var(--accent-color);
            background-color: rgba(0, 0, 0, 0.2);
        }

        .table tr:hover {
            background-color: rgba(0, 198, 255, 0.1);
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
            color: var(--accent-color);
        }

        input, select, textarea {
            width: 100%;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--primary-color);
            border-radius: 5px;
            color: var(--text-color);
            font-size: 14px;
        }

        .status-badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
        }

        .status-active {
            background-color: rgba(51, 204, 51, 0.2);
            color: var(--success-color);
        }

        .status-inactive {
            background-color: rgba(255, 204, 0, 0.2);
            color: var(--warning-color);
        }

        .status-deleted {
            background-color: rgba(255, 51, 102, 0.2);
            color: var(--danger-color);
        }

        .nav-item {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            background-color: rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-item:hover, .nav-item.active {
            background-color: rgba(0, 198, 255, 0.2);
            color: var(--accent-color);
        }

        .nav-item i {
            margin-right: 10px;
        }

        .search-container {
            margin-bottom: 20px;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: var(--card-bg);
            margin: 10% auto;
            padding: 20px;
            border-radius: 10px;
            width: 90%;
            max-width: 600px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(0, 204, 255, 0.3);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0, 204, 255, 0.3);
        }

        .close {
            color: var(--text-color);
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: var(--accent-color);
        }

        .modal-footer {
            margin-top: 20px;
            padding-top: 10px;
            border-top: 1px solid rgba(0, 204, 255, 0.3);
            display: flex;
            justify-content: flex-end;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .pagination button {
            background-color: rgba(0, 0, 0, 0.2);
            color: var(--text-color);
            border: 1px solid rgba(0, 204, 255, 0.3);
            padding: 8px 15px;
            margin: 0 5px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pagination button:hover, .pagination button.active {
            background-color: rgba(0, 198, 255, 0.3);
        }

        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: 1fr;
            }
        }

        /* 今日新增用户样式 */
        .new-users-container {
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .new-users-list {
            position: absolute;
            width: 100%;
            animation: scroll 20s linear infinite;
        }

        .new-user-item {
            padding: 10px 0;
            border-bottom: 1px solid rgba(0, 204, 255, 0.2);
        }

        @keyframes scroll {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-100%);
            }
        }

        /* 导入用户模块样式 */
        .import-users {
            display: flex;
            align-items: center;
            margin-left: 20px; /* 与新增用户按钮的间距 */
        }

        .import-users input[type="file"] {
            display: none; /* 隐藏默认的文件输入框 */
        }

        .import-users label {
            background: linear-gradient(135deg, #ffcc00, #ff9900);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            margin-right: 10px;
        }

        .import-users label:hover {
            box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
            transform: translateY(-2px);
        }

        .import-users .btn {
             background: linear-gradient(135deg, #3498db, #2980b9);
        }

        .import-users .btn:hover {
            box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="sidebar">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-user-circle"></i> 系统信息
                </div>
                <div class="card-content">
                    <p>用户: 管理员</p>
                    <p>登录时间: <span id="loginTime"></span></p>
                    <p>系统状态: 正常运行</p>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <i class="fas fa-server"></i> 系统统计
                </div>
                <div class="card-content">
                    <p>总用户数: <span id="totalUsers"></span></p>
                    <p>管理员: 3</p>
                    <p>今日新增用户: <span id="todayNewUsersCount"></span></p>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <i class="fas fa-cog"></i> 系统设置
                </div>
                <div class="card-content">
                    <div class="nav-item active">
                        <i class="fas fa-users"></i> 用户管理
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-cog"></i> <a href="风险参数分析.html" class="case-link">风险参数配置</a>
                    </div>
                    <div class="nav-item">
                        <i class="fas fa-chart-bar"></i> <a href="数据分析.html" class="case-link">数据分析</a>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <i class="fas fa-user-plus"></i> 今日新增用户
                </div>
                <div class="card-content">
                    <div class="new-users-container">
                        <div class="new-users-list" id="newUsersList">
                            <!-- 新增用户将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-content">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-users"></i> 用户管理
                </div>
                <div class="card-content">
                    <div class="search-container">
                        <div class="form-group">
                            <label for="searchInput"><i class="fas fa-search"></i> 用户搜索</label>
                            <div style="display: flex;">
                                <input type="text" id="searchInput" placeholder="输入用户名、邮箱或手机号">
                                <button class="btn" id="searchBtn" style="margin-left: 10px;">
                                    <i class="fas fa-search"></i> 搜索
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" style="display: flex; align-items: center;">
                        <button id="addUserBtn" class="btn btn-success">
                            <i class="fas fa-plus"></i> 新增用户
                        </button>
                        <div class="import-users">
                            <label for="excelFile">
                                <i class="fas fa-file-excel"></i> 选择 Excel
                            </label>
                            <input type="file" id="excelFile" accept=".xlsx, .xls">
                            <button class="btn" id="importBtn">
                                <i class="fas fa-upload"></i> 导入用户
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>姓名</th>
                                    <th>邮箱</th>
                                    <th>角色</th>
                                    <th>状态</th>
                                    <th>最后登录</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="userTableBody">
                                <!-- 表格内容将通过JavaScript动态生成 -->
                            </tbody>
                        </table>
                    </div>

                    <div class="pagination" id="pagination">
                        <!-- 分页按钮将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户添加/编辑模态框 -->
    <div id="userModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">添加新用户</h3>
                <span class="close">&times;</span>
            </div>
            <div class="card-content">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="fullname">姓名</label>
                    <input type="text" id="fullname" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                    <label for="phone">手机号</label>
                    <input type="tel" id="phone" placeholder="请输入手机号">
                </div>
                <div class="form-group">
                    <label for="role">角色</label>
                    <select id="role">
                        <option value="管理员">管理员</option>
                        <option value="分析师">分析师</option>
                        <option value="普通用户">普通用户</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="status">状态</label>
                    <select id="status">
                        <option value="active">启用</option>
                        <option value="inactive">禁用</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" style="margin-right: 10px;" id="cancelBtn">取消</button>
                <button class="btn" style="background: var(--success-color);" id="saveBtn">保存</button>
            </div>
        </div>
    </div>

    <script>
        // 存储用户数据的数组，使用提供的人名
        let users = [
            { id: 1, username: 'admin', fullname: '靳帆', email: 'admin@example.com', role: '管理员', status: 'active', lastLogin: '2025-05-17 07:30', phone: '13800000001' },
            { id: 2, username: 'user001', fullname: '李洁', email: 'lijie@example.com', role: '普通用户', status: 'active', lastLogin: '2025-05-17 08:15', phone: '13900000002' },
            { id: 3, username: 'user002', fullname: '王桂芳', email: 'wangguifang@example.com', role: '分析师', status: 'inactive', lastLogin: '2025-05-17 08:45', phone: '13000000003' },
            { id: 4, username: 'user003', fullname: '刘丽华', email: 'liulihua@example.com', role: '普通用户', status: 'active', lastLogin: '2025-05-17 09:20', phone: '13100000004' },
            { id: 5, username: 'user004', fullname: '蒋丽华', email: 'jianglihua@example.com', role: '分析师', status: 'deleted', lastLogin: '2025-05-17 09:20', phone: '13200000005' },
            { id: 6, username: 'user005', fullname: '张淑珍', email: 'zhangshuzhen@example.com', role: '普通用户', status: 'active', lastLogin: '2023-10-05 09:45', phone: '13300000006' },
            { id: 7, username: 'user006', fullname: '赵坤', email: 'zhaokun@example.com', role: '分析师', status: 'active', lastLogin: '2023-10-03 14:20', phone: '13400000007' },
            { id: 8, username: 'user007', fullname: '邱瑞', email: 'qiurui@example.com', role: '普通用户', status: 'inactive', lastLogin: '2023-10-01 08:30', phone: '13500000008' },
            { id: 9, username: 'user008', fullname: '杜春梅', email: 'duchunmei@example.com', role: '普通用户', status: 'active', lastLogin: '2023-09-28 15:15', phone: '13600000009' },
            { id: 10, username: 'user009', fullname: '陈婷婷', email: 'chentingting@example.com', role: '分析师', status: 'active', lastLogin: '2023-09-25 10:00', phone: '13700000010' },
            { id: 11, username: 'user010', fullname: '董桂荣', email: 'dongguirong@example.com', role: '普通用户', status: 'inactive', lastLogin: '2023-09-20 16:50', phone: '13800000011' },
            { id: 12, username: 'user011', fullname: '段帅', email: 'duanshuai@example.com', role: '普通用户', status: 'active', lastLogin: '2023-09-18 11:00', phone: '13900000012' },
            { id: 13, username: 'user012', fullname: '王斌', email: 'wangbin@example.com', role: '分析师', status: 'active', lastLogin: '2023-09-15 09:30', phone: '13000000013' },
            { id: 14, username: 'user013', fullname: '林想', email: 'linxiang@example.com', role: '普通用户', status: 'inactive', lastLogin: '2023-09-12 14:00', phone: '13100000014' },
            { id: 15, username: 'user014', fullname: '张淑珍', email: 'zhangshuzhen2@example.com', role: '普通用户', status: 'active', lastLogin: '2023-09-10 10:30', phone: '13200000015' },
            { id: 16, username: 'user015', fullname: '王斌', email: 'wangbin2@example.com', role: '分析师', status: 'active', lastLogin: '2023-09-08 16:00', phone: '13300000016' },
            { id: 17, username: 'user016', fullname: '高建国', email: 'gaojianguo@example.com', role: '普通用户', status: 'inactive', lastLogin: '2023-09-05 08:00', phone: '13400000017' },
            { id: 18, username: 'user017', fullname: '郑峰', email: 'zhengfeng@example.com', role: '普通用户', status: 'active', lastLogin: '2023-09-03 12:30', phone: '13500000018' },
            { id: 19, username: 'user018', fullname: '徐玉珍', email: 'xuyuzhen@example.com', role: '分析师', status: 'active', lastLogin: '2023-09-01 09:00', phone: '13600000019' },
            { id: 20, username: 'user019', fullname: '刘玉华', email: 'liuyuhua@example.com', role: '普通用户', status: 'inactive', lastLogin: '2023-08-30 15:45', phone: '13700000020' },
            { id: 21, username: 'user020', fullname: '许林', email: 'xulin@example.com', role: '普通用户', status: 'active', lastLogin: '2023-08-28 10:00', phone: '13800000021' },
            { id: 22, username: 'user021', fullname: '韩华', email: 'hanhua@example.com', role: '分析师', status: 'active', lastLogin: '2023-08-25 11:30', phone: '13900000022' },
            { id: 23, username: 'user022', fullname: '任秀珍', email: 'renxiuzhen@example.com', role: '普通用户', status: 'inactive', lastLogin: '2023-08-22 14:00', phone: '13000000023' },
            { id: 24, username: 'user023', fullname: '周桂英', email: 'zhouguiying@example.com', role: '普通用户', status: 'active', lastLogin: '2023-08-20 09:15', phone: '13100000024' },
            { id: 25, username: 'user024', fullname: '张鑫', email: 'zhangxin@example.com', role: '分析师', status: 'active', lastLogin: '2023-08-18 16:30', phone: '13200000025' },
            { id: 26, username: 'user025', fullname: '刘强', email: 'liuqiang@example.com', role: '普通用户', status: 'inactive', lastLogin: '2023-08-15 08:45', phone: '13300000026' },
            { id: 27, username: 'user026', fullname: '王斌', email: 'wangbin3@example.com', role: '分析师', status: 'active', lastLogin: '2023-08-12 10:00', phone: '13400000027' },
            { id: 28, username: 'user027', fullname: '张玲', email: 'zhangling@example.com', role: '普通用户', status: 'active', lastLogin: '2023-08-10 11:30', phone: '13500000028' },
            { id: 29, username: 'user028', fullname: '刘志强', email: 'liuzhiqiang@example.com', role: '普通用户', status: 'inactive', lastLogin: '2023-08-08 14:00', phone: '13600000029' },
            { id: 30, username: 'user029', fullname: '洪秀英', email: 'hongxiuying@example.com', role: '分析师', status: 'active', lastLogin: '2023-08-05 09:15', phone: '13700000030' },
            { id: 31, username: 'user030', fullname: '李秀华', email: 'lixiuhua@example.com', role: '普通用户', status: 'active', lastLogin: '2023-08-03 16:30', phone: '13800000031' },
            { id: 32, username: 'user031', fullname: '陈淑珍', email: 'chenshuzhen@example.com', role: '分析师', status: 'inactive', lastLogin: '2023-08-01 08:45', phone: '13900000032' },
            { id: 33, username: 'user032', fullname: '牟桂英', email: 'mouguiying@example.com', role: '普通用户', status: 'active', lastLogin: '2023-07-30 10:00', phone: '13000000033' },
            { id: 34, username: 'user033', fullname: '鞠辉', email: 'juhui@example.com', role: '普通用户', status: 'active', lastLogin: '2023-07-28 11:30', phone: '13100000034' },
            { id: 35, username: 'user034', fullname: '龙萍', email: 'longping@example.com', role: '分析师', status: 'inactive', lastLogin: '2023-07-25 14:00', phone: '13200000035' },
            { id: 36, username: 'user035', fullname: '尚英', email: 'shangying@example.com', role: '普通用户', status: 'active', lastLogin: '2023-07-22 09:15', phone: '13300000036' },
            { id: 37, username: 'user036', fullname: '崔萍', email: 'cuiping@example.com', role: '分析师', status: 'active', lastLogin: '2023-07-20 16:30', phone: '13400000037' },
            { id: 38, username: 'user037', fullname: '张秀荣', email: 'zhangxiurong@example.com', role: '普通用户', status: 'inactive', lastLogin: '2023-07-18 08:45', phone: '13500000038' },
            { id: 39, username: 'user038', fullname: '陆志强', email: 'luzhiqiang@example.com', role: '普通用户', status: 'active', lastLogin: '2023-07-15 10:00', phone: '13600000039' },
            { id: 40, username: 'user039', fullname: '李兵', email: 'libing@example.com', role: '分析师', status: 'active', lastLogin: '2023-07-12 11:30', phone: '13700000040' },
            { id: 41, username: 'user040', fullname: '杜瑞', email: 'durui@example.com', role: '普通用户', status: 'inactive', lastLogin: '2023-07-10 14:00', phone: '13800000041' },
            { id: 42, username: 'user041', fullname: '赵丽丽', email: 'zhaolili@example.com', role: '普通用户', status: 'active', lastLogin: '2023-07-08 09:15', phone: '13900000042' },
            { id: 43, username: 'user042', fullname: '王军', email: 'wangjun@example.com', role: '分析师', status: 'active', lastLogin: '2023-07-05 16:30', phone: '13000000043' },
            { id: 44, username: 'user043', fullname: '魏志强', email: 'weizhiqiang@example.com', role: '普通用户', status: 'inactive', lastLogin: '2023-07-03 08:45', phone: '13100000044' },
            { id: 45, username: 'user044', fullname: '程琳', email: 'chenglin@example.com', role: '分析师', status: 'active', lastLogin: '2023-07-01 10:00', phone: '13200000045' }
        ];

        // 新增用户数组 (模拟今日新增)，使用提供的人名
        let newUsers = [
             { id: 101, username: 'newuser01', fullname: '孙悦', email: 'newuser01@example.com', role: '普通用户', status: 'active', lastLogin: '2025-05-17 09:10', createdTime: '2025-05-17 09:10' },
            { id: 102, username: 'newuser02', fullname: '郑宇', email: 'newuser02@example.com', role: '分析师', status: 'active', lastLogin: '2025-05-17 09:20', createdTime: '2025-05-17 09:20' },
            { id: 103, username: 'newuser03', fullname: '何琳', email: 'newuser03@example.com', role: '普通用户', status: 'active', lastLogin: '2025-05-17 09:30', createdTime: '2025-05-17 09:30' },
            { id: 104, username: 'newuser04', fullname: '郭明', email: 'newuser04@example.com', role: '分析师', status: 'active', lastLogin: '2025-05-17 09:40', createdTime: '2025-05-17 09:40' },
            { id: 105, username: 'newuser05', fullname: '高飞', email: 'newuser05@example.com', role: '普通用户', status: 'active', lastLogin: '2025-05-17 09:50', createdTime: '2025-05-17 09:50' },
            { id: 106, username: 'newuser06', fullname: '林涛', email: 'newuser06@example.com', role: '普通用户', status: 'active', lastLogin: '2025-05-17 10:00', createdTime: '2025-05-17 10:00' },
            { id: 107, username: 'newuser07', fullname: '马丽', email: 'newuser07@example.com', role: '分析师', status: 'active', lastLogin: '2025-05-17 10:10', createdTime: '2025-05-17 10:10' },
            { id: 108, username: 'newuser08', fullname: '宋杰', email: 'newuser08@example.com', role: '普通用户', status: 'active', lastLogin: '2025-05-17 10:20', createdTime: '2025-05-17 10:20' }
        ];


        let currentUser = null;
        let nextId = users.length + 1; // 从现有用户数量+1开始分配新用户ID
        let currentPage = 1;
        const usersPerPage = 7;

        // 获取今天的日期字符串 (YYYY-MM-DD)
        function getTodayDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }

        // 显示实时登录时间
        function updateLoginTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');

            const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
            document.getElementById('loginTime').textContent = formattedDate;
        }

        // 更新系统统计信息
        function updateSystemStats() {
            document.getElementById('totalUsers').textContent = users.length;
            // 过滤出今天新增的用户
            const todayNew = users.filter(user => user.createdTime && user.createdTime.startsWith(getTodayDate()));
            document.getElementById('todayNewUsersCount').textContent = todayNew.length;
        }

        // 渲染用户表格
        function renderUserTable(page = 1) {
            const tableBody = document.getElementById('userTableBody');
            tableBody.innerHTML = '';

            const startIndex = (page - 1) * usersPerPage;
            const endIndex = Math.min(startIndex + usersPerPage, users.length);
            const currentUsers = users.slice(startIndex, endIndex);

            currentUsers.forEach(user => {
                const row = document.createElement('tr');

                row.innerHTML = `
                    <td>${user.id}</td>
                    <td>${user.username}</td>
                    <td>${user.fullname}</td>
                    <td>${user.email}</td>
                    <td>${user.role}</td>
                    <td><span class="status-badge status-${user.status}">${getStatusText(user.status)}</span></td>
                    <td>${user.lastLogin || '-'}</td> <!-- 如果lastLogin为空则显示'-' -->
                    <td>
                        <button class="btn edit-btn" style="margin-right: 5px; padding: 5px 10px;">
                            <i class="fas fa-edit"></i> 编辑
                        </button>
                        <button class="btn btn-danger delete-btn" style="padding: 5px 10px;">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </td>
                `;

                tableBody.appendChild(row);
            });

            // 渲染分页按钮
            renderPagination();

            // 添加编辑按钮事件监听
            document.querySelectorAll('.edit-btn').forEach((button, index) => {
                button.onclick = function() {
                    editUser(currentUsers[index]);
                };
            });

            // 添加删除按钮事件监听
            document.querySelectorAll('.delete-btn').forEach((button, index) => {
                button.onclick = function() {
                    const originalIndex = users.findIndex(u => u.id === currentUsers[index].id);
                    deleteUser(originalIndex);
                };
            });
        }

        // 渲染分页按钮
        function renderPagination() {
            const paginationContainer = document.getElementById('pagination');
            paginationContainer.innerHTML = '';

            const totalPages = Math.ceil(users.length / usersPerPage);

            // 上一页按钮
            const prevButton = document.createElement('button');
            prevButton.innerHTML = '<i class="fas fa-angle-left"></i>';
            prevButton.onclick = function() {
                if (currentPage > 1) {
                    currentPage--;
                    renderUserTable(currentPage);
                }
            };
            paginationContainer.appendChild(prevButton);

            // 页码按钮
            for (let i = 1; i <= totalPages; i++) {
                const pageButton = document.createElement('button');
                pageButton.textContent = i;
                if (i === currentPage) {
                    pageButton.classList.add('active');
                }
                pageButton.onclick = function() {
                    currentPage = i;
                    renderUserTable(currentPage);
                };
                paginationContainer.appendChild(pageButton);
            }

            // 下一页按钮
            const nextButton = document.createElement('button');
            nextButton.innerHTML = '<i class="fas fa-angle-right"></i>';
            nextButton.onclick = function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    renderUserTable(currentPage);
                }
            };
            paginationContainer.appendChild(nextButton);
        }

        // 渲染今日新增用户
        function renderNewUsers() {
            const newUsersList = document.getElementById('newUsersList');
            newUsersList.innerHTML = '';

            // 过滤出今天新增的用户
            const todayNew = users.filter(user => user.createdTime && user.createdTime.startsWith(getTodayDate()));

            // 将今天新增用户数组倒序排列，最新的在前面
            const reversedNewUsers = [...todayNew].reverse();

            reversedNewUsers.forEach(user => {
                const userItem = document.createElement('div');
                userItem.className = 'new-user-item';

                userItem.innerHTML = `
                    <p>用户名: ${user.username}</p>
                    <p>角色: ${user.role}</p>
                    <p>创建时间: ${user.createdTime}</p>
                `;

                newUsersList.appendChild(userItem);
            });
        }

        // 获取状态文本
        function getStatusText(status) {
            switch(status) {
                case 'active': return '启用';
                case 'inactive': return '禁用';
                case 'deleted': return '已删除';
                default: return status;
            }
        }

        // 初始化页面
        window.onload = function() {
            updateLoginTime();
            renderUserTable();
            renderNewUsers();
            updateSystemStats();

            // 用户模态框功能
            const modal = document.getElementById('userModal');
            const addUserBtn = document.getElementById('addUserBtn');
            const closeBtn = document.getElementsByClassName('close')[0];
            const cancelBtn = document.getElementById('cancelBtn');
            const saveBtn = document.getElementById('saveBtn');
            const modalTitle = document.getElementById('modalTitle');
            const searchInput = document.getElementById('searchInput');
            const searchBtn = document.getElementById('searchBtn');
            const excelFile = document.getElementById('excelFile');
            const importBtn = document.getElementById('importBtn');


            // 打开添加用户模态框
            addUserBtn.onclick = function() {
                modalTitle.textContent = '添加新用户';
                currentUser = null;
                resetForm();
                modal.style.display = 'block';

                // 确保模态框居中
                modal.style.top = '50%';
                modal.style.transform = 'translateY(-50%)';
            }

            // 关闭模态框
            closeBtn.onclick = function() {
                modal.style.display = 'none';
            }

            // 取消按钮
            cancelBtn.onclick = function() {
                modal.style.display = 'none';
            }

            // 点击模态框外部关闭
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = 'none';
                }
            }

            // 保存按钮
            saveBtn.onclick = function() {
                const username = document.getElementById('username').value;
                const fullname = document.getElementById('fullname').value;
                const email = document.getElementById('email').value;
                const phone = document.getElementById('phone').value;
                const role = document.getElementById('role').value;
                const status = document.getElementById('status').value;
                const password = document.getElementById('password').value;

                if (!username || !fullname || !email || !phone || !password) {
                    alert('请填写所有必填字段');
                    return;
                }

                const now = new Date();
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;

                if (currentUser === null) {
                    // 添加新用户
                    const newUser = {
                        id: nextId++,
                        username,
                        fullname,
                        email,
                        phone,
                        role,
                        status,
                        lastLogin: '-', // 新用户登录时间初始为空
                        createdTime: formattedDate
                    };

                    users.push(newUser);

                } else {
                    // 更新现有用户
                    currentUser.username = username;
                    currentUser.fullname = fullname;
                    currentUser.email = email;
                    currentUser.phone = phone;
                    currentUser.role = role;
                    currentUser.status = status;
                    // 密码不在这里处理，需要单独的密码修改功能
                }

                renderUserTable(currentPage);
                renderNewUsers();
                updateSystemStats();
                modal.style.display = 'none';
            }

            // 搜索功能
            searchBtn.onclick = function() {
                performSearch();
            }

            searchInput.addEventListener('keypress', function(event) {
                if (event.key === 'Enter') {
                    performSearch();
                }
            });

            function performSearch() {
                const searchTerm = searchInput.value.toLowerCase();
                if (searchTerm) {
                    const filteredUsers = users.filter(user =>
                        user.username.toLowerCase().includes(searchTerm) ||
                        user.email.toLowerCase().includes(searchTerm) ||
                        user.fullname.includes(searchTerm) ||
                        (user.phone && user.phone.includes(searchTerm)) // 搜索手机号
                    );

                    const tableBody = document.getElementById('userTableBody');
                    tableBody.innerHTML = '';

                    if (filteredUsers.length === 0) {
                        tableBody.innerHTML = '<tr><td colspan="8" style="text-align: center;">没有找到匹配的用户</td></tr>';
                    } else {
                        filteredUsers.forEach(user => {
                             const row = document.createElement('tr');

                            row.innerHTML = `
                                <td>${user.id}</td>
                                <td>${user.username}</td>
                                <td>${user.fullname}</td>
                                <td>${user.email}</td>
                                <td>${user.role}</td>
                                <td><span class="status-badge status-${user.status}">${getStatusText(user.status)}</span></td>
                                <td>${user.lastLogin || '-'}</td>
                                <td>
                                    <button class="btn edit-btn" style="margin-right: 5px; padding: 5px 10px;">
                                        <i class="fas fa-edit"></i> 编辑
                                    </button>
                                    <button class="btn btn-danger delete-btn" style="padding: 5px 10px;">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </td>
                            `;

                            tableBody.appendChild(row);
                        });

                        // 添加编辑按钮事件监听
                        document.querySelectorAll('.edit-btn').forEach((button, index) => {
                            button.onclick = function() {
                                editUser(filteredUsers[index]);
                            };
                        });

                        // 添加删除按钮事件监听
                        document.querySelectorAll('.delete-btn').forEach((button, index) => {
                            button.onclick = function() {
                                const originalIndex = users.findIndex(u => u.id === filteredUsers[index].id);
                                deleteUser(originalIndex);
                            };
                        });
                    }

                    // 搜索结果不分页，隐藏分页按钮
                    document.getElementById('pagination').style.display = 'none';

                } else {
                    // 搜索框为空时恢复分页和完整列表
                    renderUserTable(currentPage);
                    document.getElementById('pagination').style.display = 'flex';
                }
            }

            // 导入用户功能 (前端模拟)
            importBtn.onclick = function() {
                const file = excelFile.files[0];
                if (!file) {
                    alert('请选择一个 Excel 文件');
                    return;
                }

                // 在这里可以添加前端文件类型和大小的校验

                // 模拟文件上传和处理
                alert(`正在模拟导入文件: ${file.name}\n实际的导入处理需要在后端完成。`);

                // 模拟导入成功后更新用户列表和统计信息
                // 实际应用中，这里会调用后端接口获取导入的用户数据
                // 假设导入了几个新用户
                const importedUsers = [
                    { id: nextId++, username: 'importeduser01', fullname: '王刚', email: 'wanggang@example.com', role: '普通用户', status: 'active', lastLogin: '-', createdTime: formattedDateForImport(), phone: '13812345678' },
                    { id: nextId++, username: 'importeduser02', fullname: '李梅', email: 'limei@example.com', role: '分析师', status: 'active', lastLogin: '-', createdTime: formattedDateForImport(), phone: '13987654321' }
                ];

                users = users.concat(importedUsers);

                // 更新今日新增用户列表（如果导入的用户是今天创建的）
                importedUsers.forEach(user => {
                    if (user.createdTime.startsWith(getTodayDate())) {
                        // 检查是否已存在，避免重复添加（虽然模拟数据不会重复）
                         if (!newUsers.find(nu => nu.id === user.id)) {
                             newUsers.push(user);
                         }
                    }
                });


                renderUserTable(currentPage);
                renderNewUsers();
                updateSystemStats();
                excelFile.value = ''; // 清空文件选择框
            }

            // 格式化导入时间 (模拟)
            function formattedDateForImport() {
                 const now = new Date();
                 const year = now.getFullYear();
                 const month = String(now.getMonth() + 1).padStart(2, '0');
                 const day = String(now.getDate()).padStart(2, '0');
                 const hours = String(now.getHours()).padStart(2, '0');
                 const minutes = String(now.getMinutes()).padStart(2, '0');
                 return `${year}-${month}-${day} ${hours}:${minutes}`;
            }
        };

        // 编辑用户
        function editUser(user) {
            currentUser = user;
            document.getElementById('modalTitle').textContent = '编辑用户';

            document.getElementById('username').value = user.username;
            document.getElementById('fullname').value = user.fullname;
            document.getElementById('email').value = user.email;
            document.getElementById('phone').value = user.phone || '';
            document.getElementById('role').value = user.role;
            document.getElementById('status').value = user.status;
            document.getElementById('password').value = ''; // 编辑时不显示密码

            document.getElementById('userModal').style.display = 'block';

            // 确保模态框居中
            document.getElementById('userModal').style.top = '50%';
            document.getElementById('userModal').style.transform = 'translateY(-50%)';
        }

        // 删除用户
        function deleteUser(index) {
            if (confirm('确定要删除这个用户吗？')) {
                // 从 users 数组中删除
                const deletedUser = users.splice(index, 1)[0];

                // 如果删除的是今日新增用户，也从 newUsers 数组中删除
                const newUserIndex = newUsers.findIndex(nu => nu.id === deletedUser.id);
                if (newUserIndex !== -1) {
                    newUsers.splice(newUserIndex, 1);
                }

                renderUserTable(currentPage);
                renderNewUsers();
                updateSystemStats();
            }
        }

        // 重置表单
        function resetForm() {
            document.getElementById('username').value = '';
            document.getElementById('fullname').value = '';
            document.getElementById('email').value = '';
            document.getElementById('phone').value = '';
            document.getElementById('role').value = '普通用户'; // 默认角色
            document.getElementById('status').value = 'active'; // 默认状态
            document.getElementById('password').value = '';
        }
    </script>
</body>
</html>